<template>
  <input id="ipt" type="text" v-model="msg"><br>
  <input type="text" v-model="msg1"><br>
  <button @click="stopWtch">停止监听</button>
</template>

<script lang="ts" setup>
import {ref,watchEffect} from "vue";

let msg = ref<string>('飞机')
let msg1 = ref<string>('飞机杯子')

/**
 * oninvalidaye:监听之前需要做一些事
 * watchEffect:有返回值的,是一个函数,停止监听的函数
 */
const stop = watchEffect((oninvalidaye) => {
  console.log('message=====>',msg.value)
  console.log('message=====>',msg1.value)


  let ipt:HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement
  console.log(ipt)


  oninvalidaye(() => {
    console.log('before')
  })
},{
  flush:'post',   //pre -> 组件更新之前  sync -> 同步执行  post -> 组件更新之后执行  (获取ipt)
  // 调试程序的方法(测试工具)
  // onTrigger:(event) => {
  //   debugger
  // }
})
const stopWtch = () => stop()
</script>

<style scoped>

</style>